<template>
    <div 
        class="book-text"
        :style="{'background-image': `url(${$store.state.user.bgs[$store.state.user.bgn]})`,}">
        <page-x
            :pageWidth = pageWid
            :gapWidth = gapWid
            :bid = bid
            @chaterSub='chater_sub'
            @chaterAdd='chater_add'>
            <div 
                class="text-1"
                ref="a"
                v-html="bookWords">
            </div>
        </page-x>
        <div class="loading" v-show="isLoading">
            <img src="@/assets/img/loading2.gif" alt="">
        </div>
    </div>
</template>

<script>
import pageX from '../components/pageX.vue'
export default {
    inject:['reload'], 
    name: 'bookText',
    components: {
        pageX
    },
    data() {
        return {
            index: 0,
            pageWid: 0,
            gapWid: 0,
            bookWords: null,
            bid: 0,
            cid: 0,
            isLoading: true,
        }
    },
    methods: {
        loadWords() {
            if(this.$route.params.bid) {
                this.bid = this.$route.params.bid;
            }
            if(this.$route.params.cid) {
                this.cid = this.$route.params.cid;
            }
            this.isLoading = true;
            console.log('go');
            axios.get('https://apis.netstart.cn/yunyuedu/reader/book/content.json?source_uuid='+this.bid+'&content_uuid='+this.cid)
                .then((success)=>{
                    console.log('book-t',success);
                    if(!success.successful  || success.data == null) {
                        this.bookWords = '<h1>需要会员才能看哦。</h1>';
                    }
                    else{
                        this.bookWords = success.data.content.replace(/<p><\/p>/g,'');
                    }
                    this.getpageWid();
                    this.isLoading = false;
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
        // 获取页面宽度
        getpageWid() {
            // console.log(this.$refs.a);
            let long = parseFloat(this.$refs.a.getBoundingClientRect().width);
            this.rootSize = parseFloat(document.documentElement.style['fontSize']);
            // (20 / 37.5) = (x / rootSize)   x = (120/37.5) *rootSize
            let navHeight = (20/37.5) *this.rootSize; // 头尾导航栏的高度
            this.gapWid = navHeight;
            this.pageWid = (long+navHeight);
            console.log('this.pageWid',parseFloat(this.$refs.a.getBoundingClientRect().width));
        },
        setX() {
            this.$refs.a.style.transform = 'translateX(-'+this.index*+this.pageWid+'px)';
        },
        chater_sub() {
            console.log('reading.chaterList',this.$store.state.reading.chaterList);
            if(this.bid == this.$store.state.reading.bid &&
            this.$store.state.reading.chaterList.length > 0){
                var i=0;
                var found = false;
                for(;i<this.$store.state.reading.chaterList.length;i++){
                    if(this.cid == this.$store.state.reading.chaterList[i].uuid){
                        found = true;
                        break;
                    }
                }
                if(found && i > 0){
                    i--;
                    this.$router.replace('/book-text/'+this.bid+'/'+this.$store.state.reading.chaterList[i].uuid+'/m');
                }
            }else {
                this.bookWords = '';
                this.isLoading = true;
                this.loadingChater(()=>{
                    var i=0;
                    var found = false;
                    for(;i<this.$store.state.reading.chaterList.length;i++){
                        if(this.cid == this.$store.state.reading.chaterList[i].uuid){
                            found = true;
                            break;
                        }
                    }
                    if(found && i > 0){
                        i--;
                        this.$router.replace('/book-text/'+this.bid+'/'+this.$store.state.reading.chaterList[i].uuid+'/m');
                    }
                });
            }
        },
        chater_add() {
            console.log('reading.chaterList',this.$store.state.reading.chaterList);
            if(this.bid == this.$store.state.reading.bid &&
            this.$store.state.reading.chaterList.length > 0){
                var i=0;
                var found = false;
                for(;i<this.$store.state.reading.chaterList.length;i++){
                    if(this.cid == this.$store.state.reading.chaterList[i].uuid){
                        found = true;
                        break;
                    }
                }
                if(found && i < this.$store.state.reading.chaterList.length-1){
                    i++;
                    this.$router.replace('/book-text/'+this.bid+'/'+this.$store.state.reading.chaterList[i].uuid+'/m');
                }
            }else {
                this.bookWords = '';
                this.isLoading = true;
                this.loadingChater(()=>{
                    var i=0;
                    var found = false;
                    for(;i<this.$store.state.reading.chaterList.length;i++){
                        if(this.cid == this.$store.state.reading.chaterList[i].uuid){
                            found = true;
                            break;
                        }
                    }
                    if(found && i < this.$store.state.reading.chaterList.length-1){
                        i++;
                        this.$router.replace('/book-text/'+this.bid+'/'+this.$store.state.reading.chaterList[i].uuid+'/m');
                    }
                });
            }
        },
        loadingChater(f) {
            if(this.$route.params.bid) {
                this.bid = this.$route.params.bid;
            }
            console.log('gogog');
            // axios.get('./chater.json')
            axios.get('https://apis.netstart.cn/yunyuedu/reader/book/info.json?source_uuid='+this.bid)
                .then((success)=>{
                    let chaterList = success.data.catalog;
                    console.log('this.c',chaterList);
                    this.$store.dispatch('reading/setBidAsync',this.bid);
                    this.$store.dispatch('reading/setChaterListAsync',{list:chaterList});
                    f();
                })
                .catch((err)=>{
                    console.log(err);
                })
        },
    },
    created() {
        this.loadWords();
    },
    mounted() {
        window.addEventListener('resize',this.getpageWid);
    },
    destroyed() {
        window.removeEventListener('resize',this.getpageWid);
    },
    watch:{
        "$route"(val,oldval){
            this.reload();
        }
    },
}
</script>

<style lang="scss" scoped>
.book-text {
    position: fixed;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}
.text-1 {
    p {
        margin: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
}
.loading {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    img {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
}
</style>